<div class="docs-component-category-list-summary"
     id="category-summary"
     focusOnNavigation>
  <div [innerHTML]="_categoryListSummary"></div>
</div>
<div class="docs-component-category-list" *ngIf="(params | async)?.section as section">
  <a *ngFor="let component of docItems.getItems(section)"
     class="docs-component-category-list-item"
    [routerLink]="'/' + section + '/' + component.id">
    <div class="docs-component-category-list-card">
      <img *ngIf="section === 'components'"
          class="docs-component-category-list-card-image-wrapper"
          [src]="'../../../assets/screenshots/' + component.id + '.scene.png'"
          loading="lazy"
          alt=""
          role="presentation"
          aria-hidden="true">
      <div class="docs-component-category-list-card-title">{{component.name}}</div>
      <div class="docs-component-category-list-card-summary">{{component.summary}}</div>
    </div>
  </a>
</div>
